<template>
  <div
    @click="detail"
    class="w-full bg-white rounded-[10px] px-[15px] py-[20px] text-[12px] relative"
  >
    <div class="text-[18px] font-bold">华泰建工一切险(可扩展建工意)</div>
    <div
      class="mt-[20px] w-full px-[20px] flex items-center justify-between h-[80px]"
      style="background: rgba(239, 104, 0, 0.05)"
    >
      <div class="flex flex-col items-center justify-center">
        <div class="text-[#8B8B8B]">生效日期</div>
        <div class="mt-[10px] font-bold">2023-11-30 00:00:00</div>
      </div>
      <div class="flex flex-col items-center justify-center">
        <div class="text-[#8B8B8B]">结束日期</div>
        <div class="mt-[10px] font-bold">2023-11-30 00:00:00</div>
      </div>
    </div>
    <div
      class="mt-[20px] text-[14px] font-bold text-[#EF6800] w-full text-center"
    >
      查看详情
    </div>
    <div class="absolute top-0 right-0">
      <div
        class="w-[64px] h-[26px] flex justify-center items-center bg-[#F38E40] text-white"
        style="border-radius: 0px 10px 0px 10px"
      >
        已支付
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";

const router = useRouter();

const detail = () => {
  router.push("/h5/mine/bd/bdDetail");
};
</script>
<style scoped lang="scss"></style>
